<!DOCTYPE html>
<html>
<head>
    <title>PlayCanvas Canvas Font</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link rel="icon" type="image/png" href="../playcanvas-favicon.png" />
    <script src="../../build/output/playcanvas.js"></script>
    <style>
        body { 
            margin: 0;
            overflow-y: hidden;
        }
    </style>
</head>

<body>
    <canvas id="application-canvas"></canvas>

    <script>
        var canvas = document.getElementById('application-canvas');
        var app = new pc.Application(canvas, {
            mouse: new pc.Mouse(document.body),
            touch: new pc.TouchDevice(document.body),
            elementInput: new pc.ElementInput(canvas)
        });
        app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
        app.setCanvasResolution(pc.RESOLUTION_AUTO);

        window.addEventListener("resize", function () {
            app.resizeCanvas(canvas.width, canvas.height);
        });

        // use device pixel ratio
        app.graphicsDevice.maxPixelRatio = window.devicePixelRatio;

        app.start();
    </script>

    <script>
        // Create a canvas font asset
        const size = 64;
        const elSize = 32;
        var cf = new pc.CanvasFont(app, {
            color: new pc.Color(1, 1, 1), // white
            fontName: "Arial",
            fontSize: size,
            width: 256,
            height: 256
        });

        var asset = new pc.Asset("CanvasFont", "font", {});
        app.assets.add(asset);
        asset.resource = cf;
        asset.loaded = true;

        var fontAsset = new pc.Asset("Verdana", "font", {
            url: "../assets/fonts/arial.json"
        });
        app.assets.add(fontAsset);
        app.assets.load(fontAsset);

        // create camera
        var c = new pc.Entity();
        c.addComponent('camera', {
            clearColor: new pc.Color(44/255, 62/255, 80/255),
            farClip: 10000
        });
        c.translate(500,500,500);
        c.lookAt(0,0,0);
        app.root.addChild(c);

        var scr = new pc.Entity();
        scr.addComponent("screen", {
            screenSpace: true,
            referenceResolution: [1280, 720],
            scaleMode: pc.SCALEMODE_BLEND,
            scaleBlend: 1
        });

        var backing = new pc.Entity();
        backing.addComponent('element', {
            type: "image",
            anchor: [0.5,1,0.5,1],
            pivot: [0.5, 1],
            width: 768,
            height: 500,
            color: [0.1,0.1,0.1]
        });
        scr.addChild(backing);
        backing.translateLocal(0, -100, 0);

        // some sample text
        var firstline = "Flags: 🇺🇸🇩🇪🇮🇪🇮🇹🏴‍☠️🇨🇦";
        var secondline = "Complex emoji: 👨🏿3️⃣👁️‍🗨️";
        var thirdline = "Just strings";

        cf.createTextures(firstline);

        var canvasElementEntity1 = new pc.Entity();
        canvasElementEntity1.addComponent("element", {
            type: "text",
            fontAsset: asset,
            fontSize: elSize,
            text: firstline,
            wrapLines: true,
            autoWidth: true,
            autoHeight: true,
            margin: [0,0,0,0],
            anchor: [0,1,1,1],
            pivot: [0, 1],
            alignment: [1, 0]
        });

        cf.updateTextures(secondline);
        var canvasElementEntity2 = new pc.Entity();
        canvasElementEntity2.addComponent("element", {
            type: "text",
            fontAsset: asset,
            fontSize: elSize,
            text: secondline,
            wrapLines: true,
            autoWidth: true,
            autoHeight: true,
            margin: [0,0,0,0],
            anchor: [0,1,1,1],
            pivot: [0, 1],
            alignment: [1, 0]
        });

        var msdfElementEntity = new pc.Entity();
        msdfElementEntity.addComponent("element", {
            type: "text",
            fontAsset: fontAsset,
            fontSize: elSize,
            text: thirdline,
            wrapLines: true,
            autoWidth: true,
            autoHeight: true,
            margin: [0,0,0,0],
            anchor: [0, 1, 1, 1],
            pivot: [0, 1],
            alignment: [1, 0]
        });

        app.root.addChild(scr);
        backing.addChild(canvasElementEntity1);
        canvasElementEntity1.translateLocal(0, 0, 0);
        backing.addChild(canvasElementEntity2);
        canvasElementEntity2.translateLocal(0, -elSize, 0);
        backing.addChild(msdfElementEntity);
        msdfElementEntity.translateLocal(0, -elSize*3, 0);

        function renderAtlases () {
            var wrapper = document.createElement('div');
            for (var i = 0; i < cf.textures.length; i++) {
                var canvas = cf.textures[i].getSource();
                canvas.style.marginLeft = '20px';
                canvas.style.border = '1px solid blue';
                wrapper.appendChild(canvas);
            }
            wrapper.style.position = 'absolute';
            wrapper.style.top = '0px';
            document.body.appendChild(wrapper);
        }
        // purely for debugging: do not do this in a real application
        var showCanvasAtlasForDebug = false;
        renderAtlases();

    </script>
</body>
</html>
